<template>
  <el-table
    :key="0"
    v-loading="false"
    :data="tableData"
    border
    fit
    highlight-current-row
    style="width: 100%"
   
  >
   <el-table-column
      type="selection"
      width="80"
    >
     
    </el-table-column>
    <el-table-column
      v-for="item in columnData"
      :key="item.key"
      :label="item.label"
      :prop="item.key"
     
      align="center"
      width="80"
    >
      <template v-if="item.key != 'operate'" slot-scope="scope">
        <span>{{ scope.row[item.key] }}</span>
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      align="center"
      width="300"
      class-name="small-padding fixed-width"
    >
      <template slot-scope="{ row }">
        <el-col v-for="btn in btnGroups" :key="btn.name" :span="8" class="table-button">
          <el-button
            v-if="btn.location == 'table'"
            :type="btn.cssType||'primary'"
            size="mini"
            @click="btn.method(row)||defaultBtnMethod(row)"
          >
            {{ btn.name }}
          </el-button>
        </el-col>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: "ListTableAndButton",
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  props: [
    "listLoading",
    "tableData",
    "sortChange",
    "showReviewer",
    "columnData",
    "operateButton",
  ],
  data() {
    return {
      btnGroups:[]
    };
  },
  watch: {},
  mounted() {
    //this.btnGroups=this.$store.state.button.currentMenuButton
    this.btnGroups=this.$store.state.button.currentMenuButton.filter((e)=>{return e.location=='table'})
    console.log(this.btnGroups,"---------------");
  },
  methods: {
    defaultBtnMethod(e){
      console.log(e)
    },
    handleModifyStatus() {
      console.log("详情");
      this.$router.push("/basicEquipment/detail/1");
    },
  },
};
</script>
<style scoped>
.table-button{
  margin:5px 0;
}
</style>
